<template>
  <div class="container">
    <div class="app-container">
      <!--data 展示数据
      props :切换名字
:expand-on-click-node="false" ----- false时则只有点箭头图标的时候才会展开或者收缩节点。
default-expand-all	是否默认展开所有节点
highlight-current	是否高亮当前选中节点，默认值是 false
        -->
      <el-tree
        :data="depts"
        :props="props"
        :expand-on-click-node="false"
        icon-class="el-icon-office-building"
        default-expand-all
        highlight-current
      >
        <template #default="{ data }">
          <el-row
            style="width: 100%"
            type="flex"
            justify="between"
            align="middle"
          >
            <el-col>{{ data.name }}</el-col>
            <el-col align="center">{{ data.type }}</el-col>
            <el-col align="center">{{ data.managerName }}</el-col>
            <el-col align="center">{{ data.member || 0 }}人</el-col>
            <el-col align="center">
              <el-button type="text" @click="compile(data.id)">编辑</el-button>
              <el-button
                type="text"
                style="margin: 0 10px"
                @click="delpile(data.id)"
              >删除</el-button>
              <el-button
                type="text"
                @click="addDepartment(data.id)"
              >新增子项</el-button>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- <el-dialog title="提示" :visible="dialogVisible" width="40%" @close="close">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close">确 定</el-button>
      </span>
    </el-dialog> -->
    <Adddept
      ref="addDept"
      :show-dialog="dialogVisible"
      :current-pid="currentPid"
      @close="close"
    />
  </div>
</template>

<script>
import Adddept from './components/add-dept'
import { getzulist } from '@/api/homework/zhuzhijiagou'
import { transListToTree } from '@/utils'
import { deletDepa } from '@/api/user'
export default {
  name: 'Dashboard',
  components: {
    Adddept
  },

  data() {
    return {
      depts: [],
      props: { label: 'name' },
      dialogVisible: false,
      currentPid: 0
    }
  },

  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getzulist()
      this.depts = transListToTree(res.data, 0)
      // this.depts = res.data
      // console.log(this.depts)
      console.log(res.data, 'aaaaaaaaaaaa')
    },
    close() {
      this.dialogVisible = false

      this.getList()
    },
    // 新增部门
    // addDepartment(type, pid) {
    //   this.dialogVisible = true

    //   // console.log(res)
    //   // console.log(type)
    //   // 记录新增部门的pid
    //   this.currentPid = pid
    // },
    // 新增部门
    addDepartment(pid) {
      this.dialogVisible = true
      // 记录新增部门的pid
      this.currentPid = pid
    },
    // 编辑
    compile(pid) {
      this.dialogVisible = true
      this.currentPid = pid
      this.$nextTick(() => {
        this.$refs.addDept.getDepartmentDetail()
        console.log(this.$refs.addDept)
      })
    },
    // 删除
    async  delpile(pid) {
      // this.dialogVisible = true
      // this.currentPid = pid
      await deletDepa(pid)
      this.$message.success('删除部门成功')
      this.getList()
    }
  }
}
</script>
